<template lang="pug">
  div#time-list
    h1 {{day|dayFormatFilter}}
    ul
        li(v-for="time in times",:key="time.valueOf()",:class="{disabled:time < new Date(), selected:time.unix() == selectedTime.unix()}",@click="selectTime(time)") {{time|timeFormatFilter}}
</template>
<script>
import Moment from "moment";
import { extendMoment } from "moment-range";
import { mapMutations, mapState } from "vuex";
const moment = extendMoment(Moment);

export default {
  props: ["day"],
  data() {
    return {
      times: []
    };
  },
  computed: {
    ...mapState({
      selectedTime: "time",
      starttime:'starttime',
      endtime:'endtime'
    })
  },
  created() {
    const startMoment = moment(this.starttime,'HH:mm');
    const start = moment(this.day).set({hour:startMoment.hour(),minute:startMoment.minute()});
    const endMoment = moment(this.endtime,'HH:mm');
    const end = moment(this.day).set({hour:endMoment.hour(),minute:endMoment.minute()});
    const range = moment.range(start, end);
    const minutes = range.by("minute", { step: 30 });
    this.times = Array.from(minutes);
  },
  methods: {
    ...mapMutations(["selectTime"])
  },
  filters: {
    dayFormatFilter(day) {
      const today = new moment().startOf("day");
      const duration = moment.duration(day.diff(today));
      if (duration.asDays() < 1) {
        return "今天";
      }
      if (duration.asDays() < 2) {
        return "明天";
      }
      return day.format("MM/DD");
    },
    timeFormatFilter(time) {
      return moment(time).format("HH:mm");
    }
  }
};
</script>
<style lang="stylus" scoped>
#time-list {
  max-width: 2rem;
  min-width: 1rem;
  text-align: center;

  h1 {
    height: 0.7rem;
    line-height: 0.7rem;
    border-bottom: solid 1px #EEE;
    margin-bottom: 0.1rem;
  }

  li {
    color: #666;
    padding: 0.1rem 0;

    &.disabled {
      color: #CCC;
    }

    &.selected {
      color: #ac0e0e;
    }
  }
}
</style>


